<!DOCTYPE HTML>
<html>
<head>
    <title>插入节点的方法</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //向每个匹配的元素内部追加内容append()
            $("#btn1").click(function () {
                $("p").append("<b>你好</b>");
            });

            //将所有匹配的元素追加到指定的元素中，实际和上个方法正好返过来用
            $("#btn2").click(function () {
                $("<b>你好</b>").appendTo("p");
            });
            //prepend()向每个匹配的元素内部前置内容
            $("#btn3").click(function () {
                $("p").prepend("<b>你好</b>");
            });
//            //prependTo:将所有匹配的元素前置到指定的元素中，与上一方法返回来用
            $("#btn4").click(function () {
                $("<b>你好</b>").prependTo("p");
            });
//            //after在每个匹配的元素之后插入内容
            $("#btn5").click(function () {
                $("p").after("<b>你好</b>");
            });
//            //insertAfter将所有匹配的元素插入到指定元素的后面
            $("#btn6").click(function () {
                $("<b>你好</b>").insertAfter("p");
            });
//            //before在每个匹配的元素之前插入内容
            $("#btn7").click(function () {
                $("p").before("<b>你好</b>");
            });
//            //insertBefore与上一个相反用
            $("#btn8").click(function () {
                $("<b>你好</b>").insertBefore("p");
            });
            
        });
    </script>
</head>
<body>
<input  type="button" id="btn1" value="append()"/>
<input  type="button" id="btn2" value="appendTo()"/>
<input  type="button" id="btn3" value="prepend()"/>
<input  type="button" id="btn4" value="prependTo()"/>
<input  type="button" id="btn5" value="after()"/>
<input  type="button" id="btn6" value="insertAfter()"/>
<input  type="button" id="btn7" value="before()"/>
<input  type="button" id="btn8" value="insertbefore()"/>
<hr />
<p>我想说:</p>
</body>
</html>
